/*
 * @Descripttion: 
 * @version: 
 * @Author: PengLiang
 * @Date: 2021-09-06 19:18:31
 * @LastEditors: PengLiang
 * @LastEditTime: 2021-09-08 23:09:55
 */
$(function () {
    // 初始化
    dad = [], son = [],
    arrPos = [
        {left:"100px",top:"115px"},
        {left:"20px",top:"160px"},
        {left:"190px",top:"142px"},
        {left:"105px",top:"193px"},
        {left:"19px",top:"221px"},
        {left:"202px",top:"212px"},
        {left:"120px",top:"275px"},
        {left:"30px",top:"295px"},
        {left:"209px",top:"297px"}
    ];
    // 遍历追加
    for (var i = 0; i <= 9; i++) {
        dad.push(`img/h${i}.png`), son.push(`img/x${i}.png`);
    };
    // 进度条
    var progressHandler = () => {
            // 初始化进度条
            $('.progress').css({width: 180});
            var timer = setInterval(function () {
                // 获取进度条当前宽度
                var progressW = $('.progress').width();
                progressW -= 1;
                $('.progress').css({width: progressW});
                // end  停止灰太狼动画  stopWAnimation
                progressW <= 0 ? [clearInterval(timer), $('.mask').stop().fadeIn(300), stopWAnimation()] : 0;
            }, 1000/3)
        },

        // startWAnimation   灰太狼动画
        startWAnimation = () => {
            // 创建图片--随机索引--图片类型
            var wImg = $('<img src = "" class = "wolf">'),
                posIdx = Math.round(Math.random() * 8),
                type = Math.round(Math.random()) == 0 ? dad : son;
            wImg.css({
                position: 'absolute',
                left: arrPos[posIdx].left,
                top: arrPos[posIdx].top
            });
            // 设置内容--每隔一段时间切换图片次序
            wIdx = 0, wIdxEnd = 5;
            wTimer = setInterval(function () {
                // 0-5每执行一个动画，执行完清除，关闭计时器，继续下一个动画【再次调用动画函数startWAnimation()】
                wIdx > wIdxEnd ? [wImg.remove(), clearInterval(wTimer), startWAnimation()] : [wImg.prop('src', type[wIdx]), wIdx++];
            }, 180);
            // 渲染加载
            $('.container').append(wImg);
            gameRule(wImg);
        },

        // gameRule 游戏规则    多次点击只能执行一次 one(type,fn(){})
        gameRule = (e) => {
            $(e).one('click', function () {
                // 修改索引
                wIdx = 5, wIdxEnd = 9;
                // 获取照片地址，判断是否灰太狼
                var src = $(this).attr('src'),
                    flag = src.indexOf('h') >= 0,
                    val = parseInt($('.score').text());
                $('.score').text(flag ? val + 10 : val - 10);
            })
        },

        // 结束动画 stopWAnimation()    1、清除照片    2、关闭定时器
        stopWAnimation = () => {
            $('.wolf').remove();
            clearInterval(wTimer);
        }; 
    // 游戏规则
    $('.rule, .close').click(function () {
        $('.info').stop().fadeToggle(300);
    });

    // play
    $('.play').click(function () {
        $(this).stop().fadeOut(300);
        // 调用进度条
        progressHandler();
        // 调用灰太狼动画
        startWAnimation();
    })

    // rePlay
    $('.rePlay').click(function () {
        $('.score').text(0)
        $('.mask').stop().fadeOut(300);
        progressHandler();
        startWAnimation();
    })

    //end
    $('.end').click(function () {
        $('.mask').stop().fadeOut(300);
        $('.play').stop().fadeIn(300);
        $('.progress').css({width: 180});
        $('.score').text(0)
    })
})